Foundations of Computer Graphics - Lecture 1 [Part 5]

مقدمة
  • هنكمل الشابتر الاول, في الجزء ده هنتعرف على أشهر Image Formats المستخدمة في الـ Computer Graphics، والفرق بينهم من حيث الجودة، الضغط، الشفافية، وحجم الملفات.
  • كمان هنتكلم عن أنواع الـ Compression زي Lossy وLossless، وإزاي نختار الفورمات المناسب حسب استخدام الصورة سواء للويب، الطباعة، أو التصميم.

1) Image Formats

  • الـ Image Format هو الطريقة اللي الصورة بتتخزن وتتفتح وتتشارك بيها بين الأجهزة والبرامج.
  • اختيار الفورمات الصح بيأثر على حاجات مهمة زي:
    • جودة الصورة Image Quality
    • حجم الملف File Size
    • سرعة التحميل Loading Speed
    • التوافق مع البرامج والأجهزة Compatibility
  • يعني لو الصورة للويب، أو للطباعة، أو للمشاركة الديجيتال، لازم تختار الفورمات حسب الاستخدام.

Key Characteristics of Image Formats

  • كل format ليه طريقة ضغط مختلفة، ممكن تبقى Lossy أو Lossless.
  • بعض الصيغ بتدعم الشفافية Transparency زي PNG, SVG, WebP, GIF.
  • بعض الصيغ مش بتدعم الشفافية زي JPEG.
  • الـ Vector Formats بتفضل sharp مهما كبرت الصورة.
  • الـ Raster Formats ممكن تبكسل لما تكبرها أكتر من حجمها الطبيعي.

2) Types of Image Formats

A) BMP

definition

BMP (Bitmap) is a raster image format developed by Microsoft and mainly associated with Windows.

  • الـ BMP صيغة Raster قديمة مرتبطة غالبا بويندوز.
  • حجم ملفاتها كبير أوي.
  • مبنية على pixels، فمش بتعمل scaling كويس.
  • بتدي صورة واضحة ودقيقة,بس الجودة بتقل لما تكبر لانها raster.
  • غالبا بتتخزن من غير compression.

B) JPEG / JPG

definition

JPEG / JPG is a widely used raster image format that uses lossy compression to reduce file size.

  • الـ JPEG أو JPG من أشهر صيغ الصور.
  • مناسب جدا للصور الفوتوغرافية لانها بتدعم الوان كتير حوالي (16.7 million colors).
  • بيستخدم Lossy Compression، يعني بيقلل الحجم عن طريق فقد جزء من التفاصيل.
  • حجم الملفات بتاعته صغيره.
  • مش بيدعم Transparency.

Best use cases

  • Photographs
  • Web images
  • Email and social media content

C) GIF

definition

GIF (Graphics Interchange Format) is a limited-color raster format used for simple graphics and animations.

  • الـ GIF صيغة Raster محدودة الألوان.
  • بيدعم لحد 256 colors بس.
  • بيدعم Transparency.
  • بيدعم Animation.
  • بيدعم كمان Interlacing.
Interlacing

الـ Interlacing يعني الصورة تبدأ تظهر تدريجي وهي بتتحمل، الأول بجودة قليلة وبعدين التفاصيل تزيد مع الوقت لحد ما الصورة تكمل.
ده بيساعد المستخدم يشوف محتوى الصورة بسرعة، خصوصا لو الاتصال بطيء.

Best use cases

  • Simple animations
  • Logos, icons, and banners
  • Cartoons and line drawings

D) PNG

definition

PNG (Portable Network Graphics) is a lossless raster image format designed as an open and patent-free alternative to GIF.

  • الـ PNG صيغة Raster بتستخدم Lossless Compression.
  • اتعملت كبديل مفتوح ومجاني لـ GIF عشان تتجنب القيود القانونية القديمة.
  • بتحافظ على جودة الصورة من غير فقد.
  • بتدعم Transparency.
  • بتدعم لحد حوالي 16.7 million colors.
  • حجمها غالبا أكبر من JPEG.

Best use cases

  • Logos and user interface elements
  • Images requiring transparent backgrounds
  • Screenshots

E) TIFF

definition

TIFF (Tagged Image File Format) is a flexible, high-quality image format used in professional and publishing environments.

  • الـ TIFF صيغة عالية الجودة ومرنة.
  • بتستخدم في الطباعة الاحترافية والـ publishing.
  • ممكن تبقى من غير ضغط أو بضغط Lossless.
  • جودة الصورة فيها عالية جدا.
  • حجم الملفات كبير.
  • بتدعم معلومات إضافية عن الصورة عن طريق tags.

Best use cases

  • Professional printing
  • Scanning and archiving
  • Desktop publishing

F) WebP

definition

WebP is a modern image format developed by Google to optimize image quality and file size for web applications.

  • الـ WebP صيغة حديثة من Google.
  • هدفها تقلل حجم الصور على الويب مع الحفاظ على جودة كويسة.
  • معمولة كبديل عملي لـ JPEG, PNG, و GIF على الويب.
  • بتدعم Lossy و Lossless Compression.
  • حجمها أصغر من JPEG و PNG غالبا.
  • بتدعم Transparency و Animation.

Best use cases

  • Modern websites
  • Performance-optimized web applications

G) HEIF / HEIC

definition

HEIF (High Efficiency Image File Format) is a modern container format designed for efficient image storage with high quality.

  • الـ HEIF أو HEIC صيغة حديثة لتخزين الصور بكفاءة عالية.
  • بتدي جودة كويسة مع حجم أقل.
  • بتدعم تخزين أكتر من صورة جوه نفس الملف.
  • بتدعم Metadata.
  • بتدعم Transparency و HDR.

Best use cases

  • Mobile photography
  • High-quality image storage

H) AVIF

definition

AVIF is a modern image format that provides excellent image quality with very small file sizes using advanced compression techniques.

  • الـ AVIF من الصيغ الحديثة جدا.
  • بيقدم جودة عالية مع حجم صغير جدا.
  • كفاءة الضغط فيه أعلى من JPEG و WebP.
  • بيدعم HDR, Transparency, و Animation.
  • صيغة Royalty-free.

Best use cases

  • Next-generation web graphics
  • High-quality images with minimal storage requirements

I) EPS

definition

EPS (Encapsulated PostScript) is a vector image format used in professional graphic design and printing.

  • الـ EPS صيغة Vector.
  • بتستخدم كتير في التصميم والطباعة.
  • بتتعمل لها scaling لأي حجم من غير فقدان جودة.
  • قابلة للتعديل في برامج الـ vector graphics.

Best use cases

  • Logos
  • Illustrations
  • Print-ready designs

J) RAW Image Formats

definition

RAW image formats store unprocessed image data exactly as captured by the camera sensor or scanner.

  • صيغ الـ RAW زي .raw, .cr2, .nef, .orf بتخزن بيانات الصورة الخام من الكاميرا أو الاسكانر.
  • بتحافظ على أكبر قدر ممكن من معلومات الصورة والـ Dynamic Range.
  • بتستخدم Higher Color Depth، وده بيساعد في تعديل الإضاءة والألوان بدقة.
  • محتاجة برامج مخصوصة للعرض والتعديل.
  • بتخزن Metadata كتير عن إعدادات الكاميرا وظروف التصوير.

Best use cases

  • Professional and high-end photography
  • Advanced image editing
  • Color correction
  • Post-processing workflows

Comparison of Image Formats

Format Type Compression Transparency Animation Best For
BMP Raster None / Limited No No Crisp, uncompressed images (rarely used now)
JPEG Raster Lossy No No Photographs, web images, social media
GIF Raster Lossless (256 colors) Yes Yes Simple animations, logos, icons
PNG Raster Lossless Yes No UI elements, screenshots, transparent backgrounds
TIFF Raster Lossless / None Yes No Professional printing, scanning, archiving
WebP Raster Lossy / Lossless Yes Yes Modern websites, performance-optimized apps
HEIF Raster Lossy (High Efficiency) Yes Yes Mobile photography, high-quality storage
AVIF Raster Lossy / Lossless Yes Yes Next-gen web graphics, high HDR quality
EPS Vector N/A Yes No Logos, illustrations, print-ready designs
RAW Raster None / Lossless No No Professional photography, advanced editing

3) Image Saved with Transparency

  • الصور اللي بتدعم Transparency زي PNG, SVG, WebP, و GIF بتندمج كويس مع الخلفيات الملونة أو اللي فيها patterns.
  • الصور اللي مش بتدعم الشفافية زي JPEG هتظهر بخلفية ثابتة، وغالبا بتبقى بيضاء.

4) Choosing the Right Image Format

  • اختيار صيغة الصورة بيعتمد على الاستخدام، الجودة المطلوبة، حجم الملف، والخصائص اللي محتاجها.
Format أنسب استخدام
JPG / JPEG مناسب للصور الفوتوغرافية وصور الويب لما يكون الحجم الصغير أهم. الجودة بتقل مع تكرار الحفظ عشان Lossy Compression.
PNG مناسب للـ screenshots، عناصر الـ UI، والصور اللي محتاجة transparency. بيستخدم Lossless Compression.
GIF مناسب للرسومات البسيطة، line art، والانيميشن القصير بألوان محدودة.
TIFF مناسب للطباعة الاحترافية، scanning، و archiving لما تكون الجودة والـ metadata مهمين.
WebP مناسب للويب الحديث عشان بيدي حجم أقل ويدعم Lossy, Lossless, Transparency, و Animation.
AVIF مناسب لصور ويب عالية الجودة بحجم قليل جدا، ويدعم HDR, Transparency, و Animation.
HEIF / HEIC مناسب للموبايلات وتخزين الصور بجودة عالية مع حجم فعال.
RAW مناسب للتصوير الاحترافي عشان بيحافظ على بيانات السينسور الخام للتعديل المتقدم.
EPS مناسب للوجوهات والرسومات والتصميمات الجاهزة للطباعة عشان Vector وبيكبر من غير فقدان جودة.
بصمجيات
  • لو صورة فوتوغرافية للويب ومحتاج حجم صغير، استخدم JPEG أو WebP.
  • لو محتاج خلفية شفافة، استخدم PNG, WebP, أو GIF حسب الحالة.
  • لو التصميم logo أو illustration وهيتكبر كتير، استخدم صيغة vector زي EPS.

5) Image File Compression

What is Data Compression?

definition

Data compression is an art used to reduce the size of a particular file.

  • الـ Data Compression بيخلي المعلومات تتخزن بشكل مضغوط وده طبعا بيقلل حجم الملف، وبالتالي بيقلل مساحة التخزين ووقت نقل البيانات.
definition

Compression techniques try to find redundant data and remove these redundancies.

  • يعني تقنيات الضغط بتدور على البيانات المتكررة Redundant Data وتشيل التكرار ده.
  • الهدف في الآخر إننا نقلل حجم الملف عن طريق تقليل الـ Redundancy.
  • ضغط البيانات بيتقسم لنوعين كبار:
    • Lossless Compression
    • Lossy Compression

6) Lossless Compression

definition

Lossless data compression allows the original data to be perfectly reconstructed from the compressed data.

  • في Lossless Compression نقدر نرجع الداتا الأصلية بالظبط بعد فك الضغط.
  • مناسب للـ illustrations، drawings، text، وأي حاجة ممكن تبان وحشة مع ضغط Lossy.
  • أمثلة لصيغ lossless: ا PNG, GIF.
  • بعض الصيغ زي TIFF و MNG ممكن تستخدم Lossless أو Lossy حسب الإعدادات.

How Lossless Compression Usually Works

  • أغلب برامج الـ Lossless Compression بتعمل خطوتين:
    • تعمل Statistical Model للداتا.
    • تستخدم الموديل ده عشان تحول البيانات المتكررة أو المحتملة لـ Bit Sequences أقصر.

7) Lossy Compression

definition

Lossy data compression involves loss of information and reconstructs only an approximation of the original data.

  • في Lossy Compression بيحصل فقد في جزء من المعلومات.
  • الصورة بعد فك الضغط ممكن تبان قريبة جدا من الأصل، بس مش نسخة مطابقة.
  • بيستخدم كتير مع:
    • الـ Videos
    • الـ Audio
    • الـ Photographs
  • بيدي حجم ملفات أصغر من lossless في أغلب الحالات.
  • أغلب خوارزميات Lossy بتسمح بتغيير نسبة الضغط، يعني تقدر تبدل بين جودة أعلى أو حجم أصغر.
  • مش مناسب للـ illustrations، drawings، و text عشان الـ Compression Artifacts بتبان فيها بوضوح.
  • أشهر مثال عليه: JPEG.

8) Difference Between Lossless and Lossy Compression

ا Feature Lossless Compression Lossy Compression
الفكرة يقلل الحجم مع الحفاظ على نسخة مطابقة من الأصل. يقلل الحجم عن طريق حذف جزء من المعلومات.
بعد فك الضغط الداتا بترجع زي الأصل بالظبط. الداتا بترجع تقريبية ومش مطابقة.
حجم الملف غالبا أكبر. غالبا أصغر.
مناسب لـ النصوص، الملفات التنفيذية، الصور الطبية، الرسومات، screenshots. الصور الفوتوغرافية، الفيديو، الصوت.
التعديل المتكرر أفضل عشان مش بيزود فقد الجودة. ممكن يراكم فقد الجودة مع كل حفظ جديد.
أمثلة PNG, GIF, ZIP, gzip. JPEG.

9) Image Files Size

File Size for Raster Images

  • في الصور الـ Raster حجم الملف بيعتمد غالبا على 3 عوامل رئيسية.

1. Image Resolution

  • الـ Image Resolution هو عدد الـ pixels في الصورة.
  • بيتحسب كده:
Width × Height
  • كل ما الـ resolution يزيد، عدد الـ pixels يزيد، وحجم الملف غالبا يزيد.

2. Color Depth

  • الـ Color Depth هو عدد الـ bits المستخدمة لتمثيل لون كل pixel.
  • كل ما عدد الـ Bits Per Pixel (bpp) يزيد، نقدر نمثل ألوان أكتر.
  • بس في المقابل حجم البيانات المطلوبة لتخزين الصورة بيزيد.

3. Compression Method and Image Complexity

  • الصور غالبا بتتضغط عشان نقلل حجم الملف.
  • ا Lossless Compression بيحافظ على كل معلومات الصورة الأصلية زي PNG و GIF.
  • ا Lossy Compression بيقلل الحجم عن طريق تقريب المعلومات البصرية وحذف تفاصيل أقل ملاحظة للعين زي JPEG.
  • حتى لو صورتين عندهم نفس resolution ونفس color depth ونفس compression format، حجمهم ممكن يختلف بسبب Image Complexity.
Image Complexity
  • ا Image Complexity يعني كمية التفاصيل والتغيرات البصرية جوه الصورة.
  • الصور اللي فيها مساحات لون موحدة، ألوان قليلة، وأشكال بسيطة زي icons و line art بتبقى Low Complexity وبتتضغط كويس.
  • الصور اللي فيها تفاصيل كتير، textures، gradients، وتغيرات ألوان كتير زي photographs بتبقى High Complexity وبتبقى أصعب في الضغط، خصوصا مع lossless.

10) Uncompressed Raster Image Size Example

مثال

صورة حجمها 640 × 480 pixels وعمق اللون فيها 24-bit:

640 × 480 × 24 = 7,372,800 bits

يعني تقريبا:

921,600 bytes ≈ 0.88 MB

دي مساحة الصورة الخام قبل أي compression.

11) File Size for Compressed Raster Images

  • حجم الملف النهائي بعد الضغط بيعتمد على:
    • Compression Algorithm
    • Compression Settings
    • Image Complexity
  • تقدير تقريبي للحجم بعد الضغط:
Compressed Size ≈ Raw Size × Compression Ratio

Examples of Typical Compression Ratios

Format Typical Compression Ratio
PNG (simple graphics) 0.3 – 0.6
PNG (photographs) 0.7 – 0.9
JPEG (lossy, high quality) 0.1 – 0.3

12) File Size for Vector Images

  • الـ Vector Images بتتصرف بشكل مختلف عن الـ raster.
  • حجم ملف الـ vector بيعتمد على عدد وتعقيد العناصر، مش على الـ pixel resolution.
  • العناصر دي ممكن تكون:
    • Lines
    • Curves
    • Shapes
  • عشان كده تكبير صورة vector لأي حجم مش بيزود حجم الملف.
  • وده بيخلي صيغ الـ vector مناسبة جدا لـ:
    • Logos
    • Diagrams
    • Illustrations
كده خلصنا الجزء الخامس والشابتر كله

اتكلمنا في المحاضره دي عن Image Formats واستعرضنا كل الصيغ: BMP (قديم من غير ضغط)، JPEG (Lossy، مناسب للصور)، GIF (256 لون و Animation)، PNG (Lossless و Transparency)، TIFF (جودة عالية للطباعة)، WebP (حديث من Google)، HEIF/HEIC (حديث للتصوير)، AVIF (أحدث وأعلى كفاءة)، EPS (Vector)، و RAW (بيانات خام من الكاميرا).

وعرفنا الفرق بين Lossless Compression (بنرجع الداتا زي ما هي زي PNG) و Lossy Compression (بنفقد جزء من المعلومات عشان حجم أصغر زي JPEG).

وفي الآخر عرفنا إزاي نحسب حجم الملف: Raw Size = Width × Height × Color Depth، وإن Compression Ratio و Image Complexity بيأثروا على الحجم النهائي.